<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .border{
            border: 4px solid red;
            color: green;
        }
        #img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        #avatar{
            display: none;
        }
    </style>
    <script>
        window.onload = function(){
            /**
             * 鼠标事件
             */
            // document.getElementById('btn').onclick = function () {
            // document.getElementById('btn').ondblclick = function () {
            // document.getElementById('btn').onmouseover = function () {
            //     console.log(111);
            // }
            // document.getElementById('btn').onmouseout = function () {
            //     console.log(222);
            // }

            /**
             *  键盘事件
             */
            // document.getElementById('username').onkeydown = function () {
            //     console.log(111);
            // }
            // document.getElementById('username').onkeypress = function (e) {
            //     // console.log(e);
            //     if (e.keyCode==13){
            //         console.log('按回车');
            //     }
            // }
            // document.getElementById('username').onkeyup = function () {
            //     console.log(333);
            // }

            /**
             * 表单事件
             */
            document.getElementById('username').onfocus = function () {
                this.classList.add('border')
            }
            document.getElementById('username').onblur = function () {
                this.classList.remove('border')
            }
            document.getElementById('avatar').onchange = function(){
                // console.log(this.files[0]);
                document.getElementById('img').src = window.URL.createObjectURL(this.files[0])
            }

            document.getElementById('frm').onsubmit = function () {
                console.log(111);

                return false; // 返回false，表示阻止表单提交
            }

        }
    </script>
</head>
<body>
    <form action="" method="get" id="frm">
        <input type="button" value="点我" id="btn"> <br>
        <label for="username">用户名：</label><input type="text" id="username" name="username"> <br>
        <label for="email">邮箱：</label><input type="text" id="email" name="email"> <br>
        头像：<label for="avatar"><img src="./images/avatar.jpg" id="img"></label>
        <input type="file" id="avatar"> <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>